// pages/home/index/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    nowActive:0,              // 当前菜单的第几个
    activeStyle:'',           // 滚动位置
    rollScroll:0,             // 向左滚动
    menu: ['推荐', '母婴馆', '保健品', '美妆馆', '鞋包馆', '其他馆']
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this._getScrollOffset()
  },

  //
  onhandleTest:function(e){
    console.log(e)
  },


  // 处理菜单的选择点击　
  onhandleTapMenu:function(e){
    const currt = e.currentTarget.dataset.inx
    let roll = currt>3 ? (currt-3)*100:0
    this.setData({
      nowActive:currt,
      rollScroll:roll
    })
    this._getScrollOffset()
},

// 处理点击后的菜单滚动
_getScrollOffset: function(){
  let that = this
  wx.createSelectorQuery().select('.scroll-box').fields({scrollOffset:true},function(rest){
    wx.createSelectorQuery().select('.menu .activePos').boundingClientRect(function(res){
      that.setData({
        activeStyle:`left:${rest.scrollLeft+res.left}px;width:${res.width}px`
      })
    }).exec()
  }).exec()
},

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  }
})